<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/jquery.metadata.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/jquery.validate.min.js"></script>
		<title>在线考试</title>
		
		<style>
		 	form label {
				width:5em;
			} 
		</style>
		
		<script>
			$(function(){
				$("#updateTestCloseBtn").click(function(){
					
				});
				$(".delete-test").each(function(){
			 		   $(this).click(function(){
			 			  if(confirm("确定要删除吗？")){
			 			  }else{
			 				  $(this).attr("href","");
			 			  }
			  		  })
			    });
				
				$(".show-test").click(function(){
					var testId = $(this).parent().siblings().eq(0).text();
					$.ajax({
						type: 'POST',
						url: '${contextPath}/OnlineExam/teacher/getTestById',
						data: {
							testId: testId
						},
						dataType: 'JSON',
						success: function(data){
							$('#showTestModal .sub-name').text(data.name);
							$('#showTestModal .content').text(data.content);
							$('#showTestModal .test-type').text(data.examTestTypeVO.testType);
							$('#showTestModal .test-type-score').text(data.examTestTypeVO.testTypeScore + "分");
							$('#showTestModal .choose-a').text(data.chooseA);
							$('#showTestModal .choose-b').text(data.chooseB);
							$('#showTestModal .choose-c').text(data.chooseC);
							$('#showTestModal .choose-d').text(data.chooseD);
							$('#showTestModal .answer').text(data.answer);
						}
					});
					$('showTestModal').modal('show');
				});
//				新增试题				
				$("#addTestBtn").click(function(){
				 	 $.ajax({
						type: 'POST',
						url: '${contextPath}/OnlineExam/teacher/getSubjectAndTypes',
						data: {},
						dataType: 'JSON',
						success: function(data){
							$("#addTestForm select[name='subId']").empty();
							$("#addTestForm select[name='examTestTypeVO.testType']").empty();
							$.each(data.subjectList, function(index, item){
								$("#addTestForm select[name='subId']").append('<option value ="' + item.subId + '">' + item.name + '</option>');
							});
							$.each(data.testTypeList, function(index, item){
								$("#addTestForm select[name='examTestTypeVO.testType']").append('<option value ="' + item.testType + '" score=" ' + item.testTypeScore + '"  testTypeId="' + item.id + '">' + item.testType + '</option>');
							});
							$("#addTestForm select[name='examTestTypeVO.testType']").trigger("change");
						}
					});
				}); 
				
				$("#addTestSaveBtn").click(function(){
					var answerString = "";
					if($("#addTestForm select[name='examTestTypeVO.testType']").val() == "单选题"){
						answerString += $("#addTestForm input[name='answerSelect']:radio:checked").val();
					}else if($("#addTestForm select[name='examTestTypeVO.testType']").val() == "多选题"){
						var array = $("#addTestForm input[name='answerSelect']:checkbox:checked");
						$.each(array, function(index, item){
							answerString += (index == 0 ? $(item).val() : (',' + $(item).val())); 
						});
					}else{
						alert($("#addTestForm select[name='examTestTypeVO.testType']").val());
					}
					$("#addTestForm input[name='answer']").val(answerString);
					$("#addTestForm input[name='examTestTypeVO.id']").val($("#addTestForm select[name='examTestTypeVO.testType']").find("option:checked").attr("testTypeId"));
				});
//	修改试题			
				$(".edit-test").click(function(){
					 var testId = $(this).parent().siblings().eq(0).text();
					 var name = $(this).parent().siblings().eq(1).text();
				     var content = $(this).parent().siblings().eq(2).text();
					 var chooseA = $(this).parent().siblings().eq(3).text();
					 var chooseB = $(this).parent().siblings().eq(4).text();
					 var chooseC = $(this).parent().siblings().eq(5).text();
					 var chooseD = $(this).parent().siblings().eq(6).text();
					 var testType = $(this).parent().siblings().eq(7).text();
					 var answer = $(this).parent().siblings().eq(9).text();
					 var subId = $(this).siblings(".subId").val();
					 $.ajax({
							type: 'POST',
							url: '${contextPath}/OnlineExam/teacher/getSubjectAndTypes',
							data: {},
							dataType: 'JSON',
							success: function(data){
								$("#updateTestForm select[name='subId']").empty();
								$("#updateTestForm select[name='examTestTypeVO.testType']").empty();
								$.each(data.subjectList, function(index, item){
									$("#updateTestForm select[name='subId']").append('<option value ="' + item.subId + '">' + item.name + '</option>');
								});
								$.each(data.testTypeList, function(index, item){
									$("#updateTestForm select[name='examTestTypeVO.testType']").append('<option value ="' + item.testType + '" score=" ' + item.testTypeScore + '"  testTypeId="' + item.id + '">' + item.testType + '</option>');
								});
								$("#updateTestForm input[name='answerSelect']").each(function(){
									$(this).prop("checked", false);
								});
								$("#testId").val(testId);
								$("#updateTestForm select[name='subId']").val(subId);
								$("#updateTestForm select[name='examTestTypeVO.testType']").val(testType);
								$("#updateTestForm textarea[name='content']").val(content)
								$("#updateTestForm input[name='chooseA']").val(chooseA);
								$("#updateTestForm input[name='chooseB']").val(chooseB);
								$("#updateTestForm input[name='chooseC']").val(chooseC);
								$("#updateTestForm input[name='chooseD']").val(chooseD);
								if(testType == "单选题"){
									$('#updateTestForm input[value="' + answer +'"]').prop("checked", true);
								}else if(testType == "多选题"){
									var array = answer.split(",");
									$.each(array, function(index, item){
										$('#updateTestForm input[value="' + item +'"]:checkbox').prop("checked", true);
									});
								}else{
									alert('--')
								}
								$("#updateTestForm select[name='examTestTypeVO.testType']").trigger("change");
							}
						});
					
				}); 
				
				$("#updateTestSaveBtn").click(function(){
					var answerString = "";
					if($("#updateTestForm select[name='examTestTypeVO.testType']").val() == "单选题"){
						answerString += $("#updateTestForm input[name='answerSelect']:radio:checked").val();
					}else if($("#updateTestForm select[name='examTestTypeVO.testType']").val() == "多选题"){
						var array = $("#updateTestForm input[name='answerSelect']:checkbox:checked");
						$.each(array, function(index, item){
							answerString += (index == 0 ? $(item).val() : (',' + $(item).val())); 
						});
					}else{
						alert($("#updateTestForm select[name='examTestTypeVO.testType']").val());
					}
					$("#updateTestForm input[name='id']").val($("#testId").val());
					$("#updateTestForm input[name='answer']").val(answerString);
					$("#updateTestForm input[name='examTestTypeVO.id']").val($("#updateTestForm select[name='examTestTypeVO.testType']").find("option:checked").attr("testTypeId"));
				});
//				选择框切换			
				$("#addTestForm select[name='examTestTypeVO.testType']").change(function(){
					$("#addTestForm .testTypeScore").text("本题每题" + $(this).find("option:checked").attr("score") + "分");
					var testType = $(this).val();
					if(testType == "单选题"){
						$("#addTestForm .answerTotal input:radio").show();
						$("#addTestForm .answerTotal input:checkbox").hide();
					}else if(testType == "多选题"){
						$("#addTestForm .answerTotal input:checkbox").show();
						$("#addTestForm .answerTotal input:radio").hide();
					}else{
						alert("无试题类型！");
					}
				});
				
				$("#updateTestForm select[name='examTestTypeVO.testType']").change(function(){
					$("#updateTestForm .testTypeScore").text("本题每题" + $(this).find("option:checked").attr("score") + "分");
					var testType = $(this).val();
					if(testType == "单选题"){
						$("#updateTestForm .answerTotal input:radio").show();
						$("#updateTestForm .answerTotal input:checkbox").hide();
					}else if(testType == "多选题"){
						$("#updateTestForm .answerTotal input:checkbox").show();
						$("#updateTestForm .answerTotal input:radio").hide();
					}else{
						alert("无试题类型！");
					}
				});
				
			});
		</script>
	</head>

	<body class="no-skin">
								<div class="row">
<div id="messageDiv">
<c:if test="${not empty message}">
		<script>
			alert('${message}');
		</script>
</c:if>
</div>
									<div class="col-xs-12">
										<a class="btn btn-xs btn-primary col-xs-1" data-toggle="modal" data-target="#addTestModal" id="addTestBtn">
										<i class="ace-icon fa fa-plus"></i><span style="font-size:18px">添加试题</span>
										</a>
										<table id="sample-table-1" class="table table-striped table-bordered table-hover">
											<thead>
												<tr>
													<th class="hidden-480">题号</th>
													<th class="hidden-480">科目</th>
													<th class="hidden-480">题干</th>
													<th class="hidden-480">选项A</th>
													<th class="hidden-480">选项B</th>
													<th class="hidden-480">选项C</th>
													<th class="hidden-480">选项D</th>
													<th class="hidden-480">题目类型</th>
													<th class="hidden-480">题目分数</th>
													<th class="hidden-480">答案</th>
													<th>操作</th>
												</tr>
											</thead>

											<tbody>
											<c:forEach items="${pageList.dates }" var="test">
												<tr>
													<td>${test.id}</td>
													<td>${test.name}</td>
													<td>${test.content }</td>
													<td>${test.chooseA}</td>
													<td>${test.chooseB}</td>
													<td>${test.chooseC}</td>
													<td>${test.chooseD}</td>
													<td>${test.examTestTypeVO.testType}</td>
													<td>${test.examTestTypeVO.testTypeScore}</td>
													<td>${test.answer}</td>
													<td>
														<a title="查看试题" class="btn btn-xs btn-primary show-test" data-toggle="modal" data-target="#showTestModal">
														<i class="ace-icon fa fa-comments"></i>
														</a>
														<a title="修改试题" class="btn btn-xs btn-primary edit-test" data-toggle="modal" data-target="#updateTestModal">
														<i class="ace-icon fa fa-pencil"></i>
														</a>
														<a title="删除试题" class="btn btn-xs btn-primary delete-test" href="deleteTest/${test.id}">
														<i class="ace-icon fa fa-trash-o"></i>
														</a>
														<input type="hidden" class="subId" value="${test.subId}"> 
													</td>
												</tr>
												</c:forEach>
												<tr><td  colspan="11">
													<jsp:include page="/pager.jsp">
													<jsp:param name="url" value="${pageContext.request.contextPath}/teacher/toManageTest"/>  
													<jsp:param name="items" value="${pageList.totalSize}"/> 
													<jsp:param name="pageSize" value="${pageList.pageSize}"/>  
													</jsp:include> 
												</td></tr>
											</tbody>
										</table>
									</div><!-- /.span -->
								</div><!-- /.row -->

		
		<!--显示试题 模态框（Modal） -->
		<div class="modal fade" id="showTestModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
  			  <div class="modal-dialog">
   			     <div class="modal-content">
         			   <div class="modal-header">
             				   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             				   <h4 class="modal-title" id="myModalLabel">查看详细试题</h4>
          			  </div>
           			  <div class="modal-body">
           			  		<label>试题科目:&nbsp;&nbsp;</label><span class="sub-name"></span><br/>
           			  		<label>题目:&nbsp;&nbsp;</label><span class="content"></span>&nbsp;&nbsp;——&nbsp;&nbsp;(<span class="test-type"></span>),每题<span class="test-type-score"></span><br/>
           			  		<label>A:&nbsp;&nbsp;</label><span class="choose-a"></span><br/>
           			  		<label>B:&nbsp;&nbsp;</label><span class="choose-b"></span><br/>
           			  		<label>C:&nbsp;&nbsp;</label><span class="choose-c"></span><br/>
           			  		<label>D:&nbsp;&nbsp;</label><span class="choose-d"></span><br/>
           			  		<label style="font-weight:bold">答案:&nbsp;&nbsp;</label><span class="answer"></span><br/>
           			  </div>
            		  <div class="modal-footer">
                		  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            		</div>
       		 	</div><!-- /.modal-content -->
   			</div><!-- /.modal -->
		</div>
		
		<!--添加试题 模态框（Modal） -->
		<div class="modal fade" id="addTestModal" tabindex="-1" role="dialog" aria-labelledby="addTestModalLabel" aria-hidden="true">
  			  <div class="modal-dialog">
   			     <div class="modal-content">
         			   <div class="modal-header">
             				   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             				   <h4 class="modal-title" id="myModalLabel">添加试题</h4>
          			  </div>
           			  <div class="modal-body">
           			  	<form id="addTestForm" action="${contextPath}/OnlineExam/teacher/saveTest" method="POST">
           			  		<p><label>科目:</label><select name="subId"></select></p>
           			  		<p><label>试题类型:</label><select name="examTestTypeVO.testType"></select><span class="testTypeScore"></span></p>
           			  		<p><label style="vertical-align:top">题干:</label><textarea name="content" cols="50" rows="8" placeholder="填写题目内容" required></textarea></p>
           			  		<p><label>选项A:</label><input type="text" name="chooseA" placeholder="填写候选答案内容，作为选项A" required /></p>
           			  		<p><label>选项B:</label><input type="text" name="chooseB" placeholder="填写候选答案内容，作为选项B" required /></p>
           			  		<p><label>选项C:</label><input type="text" name="chooseC" placeholder="填写候选答案内容，作为选项C" required /></p>
           			  		<p><label>选项D:</label><input type="text" name="chooseD" placeholder="填写候选答案内容，作为选项D" required /></p>
           			  		<p><label>答案:</label>
           			  			<span class="answerTotal">
           			  				<input type="radio" name="answerSelect" value="A" checked/>
           			  				<input type="checkbox" name="answerSelect" value="A"/>选项A
           			  				<input type="radio" name="answerSelect" value="B"/>
           			  				<input type="checkbox" name="answerSelect" value="B"/>选项B
           			  				<input type="radio" name="answerSelect" value="C"/>
           			  				<input type="checkbox" name="answerSelect" value="C"/>选项C
           			  				<input type="radio" name="answerSelect" value="D"/>
           			  				<input type="checkbox" name="answerSelect" value="D"/>选项D
           			  			</span>
           			  		</p>
           			  		<input type="hidden" name="answer" value="">
           			  		<input type="hidden" name="examTestTypeVO.id" value="">
           			  	</form>
           			  </div>
            		  <div class="modal-footer">
                		  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                		  <button id="addTestSaveBtn" type="submit" class="btn btn-primary" form="addTestForm">添加</button>
            		</div>
       		 	</div><!-- /.modal-content -->
   			</div><!-- /.modal -->
		</div>
		
		<!--修改试题 模态框（Modal） -->
		<div class="modal fade" id="updateTestModal" tabindex="-1" role="dialog" aria-labelledby="updateTestModalLabel" aria-hidden="true">
  			  <div class="modal-dialog">
   			     <div class="modal-content">
         			   <div class="modal-header">
         			   		   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             				   <h4 class="modal-title" id="myModalLabel">修改试题</h4>
          			  </div>
           			  <div class="modal-body">
           			  	<form id="updateTestForm" action="${contextPath}/OnlineExam/teacher/updateTest" method="POST">
           			  		<p><label>科目:</label><select name="subId"></select></p>
           			  		<p ><label>试题类型:</label><select name="examTestTypeVO.testType"></select><span class="testTypeScore"></span></p>
           			  		<p><label style="vertical-align:top">题干:</label><textarea name="content" cols="50" rows="8" placeholder="填写题目内容" required></textarea></p>
           			  		<p><label>选项A:</label><input type="text" name="chooseA" placeholder="填写候选答案内容，作为选项A" required /></p>
           			  		<p><label>选项B:</label><input type="text" name="chooseB" placeholder="填写候选答案内容，作为选项B" required /></p>
           			  		<p><label>选项C:</label><input type="text" name="chooseC" placeholder="填写候选答案内容，作为选项C" required /></p>
           			  		<p><label>选项D:</label><input type="text" name="chooseD" placeholder="填写候选答案内容，作为选项D" required /></p>
           			  		<p><label>答案:</label>
           			  			<span class="answerTotal">
           			  				<input type="radio" name="answerSelect" value="A" checked/>
           			  				<input type="checkbox" name="answerSelect" value="A"/>选项A
           			  				<input type="radio" name="answerSelect" value="B"/>
           			  				<input type="checkbox" name="answerSelect" value="B"/>选项B
           			  				<input type="radio" name="answerSelect" value="C"/>
           			  				<input type="checkbox" name="answerSelect" value="C"/>选项C
           			  				<input type="radio" name="answerSelect" value="D"/>
           			  				<input type="checkbox" name="answerSelect" value="D"/>选项D
           			  			</span>
           			  		</p>
           			  		<input type="hidden" name="id" value="">
           			  		<input type="hidden" name="answer" value="">
           			  		<input type="hidden" name="examTestTypeVO.id" value="">
           			  	</form>
           			  </div>
            		  <div class="modal-footer">
                		  <button id="updateTestCloseBtn" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                		  <button id="updateTestSaveBtn" type="submit" class="btn btn-primary" form="updateTestForm">修改</button>
            		</div>
       		 	</div><!-- /.modal-content -->
   			</div><!-- /.modal -->
		</div>
		
		<input type="hidden" id="testId" value="testId"> 
	</body>
</html>
